<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/view/include/css-include.jsp"%>
<%@ include file="/view/include/jsp-include.jsp"%>
<%@ include file="/view/include/jquery-include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

    $().ready(function() {
        /* 달력 */
        $( "#date" ).datepicker({
            showOn: "button",
            buttonImage: "/images/calendar.gif",
            buttonImageOnly: true
        });
        
        $("#reSetBtn").bind("click",function(){
        	//if(confirm("All Clear?")){
        		 $("form[name='customerWriteFrm']").each(function(){
                     $("#messrsTypeDiv").attr("style", "display:none");
                     $("#messrsTr").attr("style", "display:none");
                       this.reset();
                 });
            //}else{
            //	$("#messrsCode").val("");
            //    $("#messrsName").val("");
           // }
            
        });

        $("#onList").bind("click",function(){
             location="/customer.html";            
        });

        
        $("#customerPopup").bind("click",function(){
            onCustomerPopup();
            
        });
        
        /* textarea 체크 */
        $("#remark").bind("keyup",function(){
            textAreaKyUp(this);  //조회 직후에도 호출해야해서 function 으로 뺌.. 
        });
        
        $("#custDiv").bind("change",function(){
            var custDiv     = $("#custDiv").val();
            if(custDiv == "1"){
                $("#messrsTypeDiv").attr("style", "display:block");
                $("#messrsTr").attr("style", "display:none");
                $("#messrsCode").val("");
                $("#messrsName").val("");

            }else if(custDiv == "3"){
                $("#messrsTr").attr("style", "display:block");
                $("#messrsTypeDiv").attr("style", "display:none");

            }else{
                $("#messrsTypeDiv").attr("style", "display:none");
                $("#messrsTr").attr("style", "display:none");
                $("#messrsCode").val("");
                $("#messrsName").val("");
            }
        });
        
        /* 저장버튼 */
        $("#saveBtn").bind("click",function(){       
            $("form[name='customerWriteFrm']").submit();
        });

        /* 메인폼 서브밋 */
        $("form[name='customerWriteFrm']").ajaxForm({
            dataType: "json",
            beforeSerialize: function($form, options) {
                //return $("form[name='orderFrm']").valid();  jquery 벨류데이션 플러그인 사용시
                 if( !validation() ){       //화면 항목 점검 시작
                    return false;
                }
            },
            success:function(data) {
               if(data.result == true){
                   alert("Saved.....!");
                   location="/customer.html";    
               }               
           },
           error:function(){alert("ERROR!");}
        }); 
    });
    
    /************************************************************************/
    /*                          textarea 글자 수 체크                       */
    /************************************************************************/
    /* textarea 체크 */
    var oldStr;
    function textAreaKyUp(obj){
        var str = obj.value;
        if(str.length <= 1000){
            oldStr = str;
            contents = "("+str.length+" / ";
            $("#cnt").html(contents);
        }else{
            alert("Limited string has been exceeded.");
            $("#pop_remark").val(oldStr);
        }
    };

    function validation(){

        var custDiv     = $("#custDiv").val();
        var custName    = $("#custName").val();
        var nation      = $("#nation").val();
        var conPerson   = $("#conPerson").val();
        var addr1       = $("#addr1").val();
        var addr2       = $("#addr2").val();
        var tel         = $("#tel").val();
        var fax         = $("#fax").val();
        var custOpt     = $('input:radio[name=custOpt]:checked').val();
        var messrsName = $("#messrsName").val();
        
        if(custDiv==null     || custDiv=="") {   alert("Customer Division required!!"); $("#custDiv").focus(); return false; }
        if(custName==null    || custName=="") { alert("Name required!!"); $("#custName").focus(); return false; }
        if(nation==null      || nation=="") { alert("Nation required!!"); $("#nation").focus(); return false; }
        if(conPerson==null   || conPerson=="") { alert("Contact Person required!!"); $("#conPerson").focus(); return false; }
        if(addr1==null       || addr1=="") { alert("Address1 required!!"); $("#addr1").focus(); return false; }
        if(addr2==null       || addr2=="") { alert("Address2 required!!"); $("#addr2").focus(); return false; }
        if(tel==null         || tel=="") { alert("Telephone required!!"); $("#tel").focus(); return false; }
        if(fax==null         || fax=="") { alert("FAX No. required!!"); $("#fax").focus(); return false; }
        
        if(custDiv == "3"){
        	if(messrsName==null         || messrsName=="") { alert("Shipper Name. required!!"); $("#messrsName").focus(); return false; }
        }
   
        if(custDiv == "1"){
        	if(custOpt==null         || custOpt=="") { alert("Commercial / Clinical trial. required!!"); $("#custOpt").focus(); return false; }
        }
        
      return true;      
    } 
    
    function onCustomerPopup(){
        window.open('/customerPop.html?customer=2', 'changeProductPop', 'width=415, height=500, toolbar=no, location=no, status=no, menubar=no, scrollbars=no');
    }
    
    function customerPopValue(arg, arg1){
        $("#messrsCode").val(arg);
        $("#messrsName").val(arg1);        
    }
    
</script>
</head>
<body>
<div class="wrap">
    <form name="customerWriteFrm" method="post" action="/saveCustomer.json">
    <div class="pagetitle">
        <h1>SHIPPER AND CUSTOMER / INSERT</h1>
    </div>
    <div>
        <table class="TableST">
            <tr>
                <th>Customer Division</th>
                <td width="100px">
                    <select name="custDiv" id="custDiv">
                        <option value="">select</option>
                        <option value="1">Shipper</option>
                        <option value="2">Messrs</option>
                        <option value="3">End user</option>           
                    </select>
                </td>
                <td>
                <div id="messrsTypeDiv" style="display: none;">
                    <input type="radio" name="custOpt" value="C">&nbsp;Commercial
                    <input type="radio" name="custOpt" value="T">&nbsp;Clinical trial
                </div>
                </td>
            </tr>
            <tr>
                <th>Name</th>
                <td colspan="2"><input type="text" class="inST" size="80" name="custName" id="custName"/></td>
            </tr>
            <tr>
                <th>Nation</th>
                <td colspan="2"><input type="text" class="inST" size="80" name="nation" id="nation"/></td>
            </tr>
            <tr>
                <th>Contact Person</th>
                <td colspan="2"><input type="text" class="inST" size="80" name="conPerson" id="conPerson"/></td>
            </tr>
            <tr>
                <th rowspan="2">Address</th>
                <td colspan="2">
                    <input type="text" style="margin-bottom:3px;margin-top:3px;" class="inST" size="80" name="addr1" id="addr1"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="text" style="margin-bottom:3px;margin-top:3px;" class="inST" size="80" name="addr2" id="addr2"/>
                </td>
            </tr>
            <tr>
                <th>Telephone</th>
                <td colspan="2"><input type="text" class="inST" size="80" name="tel" id="tel" onkeydown='onlyNum2(event);'/></td>
            </tr>
            <tr>
                <th>FAX No.</th>
                <td colspan="2"><input type="text" class="inST" size="80" name="fax" id="fax" onkeydown='onlyNum2(event);'/></td>
            </tr>
            <tr id="messrsTr" style="display: none;">
                <th>Messrs</th>
                <td colspan="2">
                    <input type="text" class="inSTR" size="80" name="messrsName" id="messrsName" readonly/>
                    <a href="#"><img src="images/web/bkn_zoom.gif" alt="customerPopup" id="customerPopup"/></a>
                    <input type="hidden" class="inST" size="80" name="messrsCode" id="messrsCode"/>
                </td>
            </tr>
            <tr>
               <th>Remarks<br><span id="cnt">(0 / </span>1000)</th>
               <td colspan="2"><textarea class="teST" wrap="virtual" id="remark" name="remark"></textarea></td>
            </tr>
            
         </table>
    </div>
    <div class="bo_btn">        
        <ul class="btnst"><li class="a"><a href="#" id="reSetBtn" >INIT</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="onList" >LIST</a></li></ul>
        <ul class="btnst"><li class="a"><a href="#" id="saveBtn" >SAVE</a></li></ul>      
    </div>
    <input type="hidden" name="saveStatus" id="saveStatus" value="SAVE"/>
    </form>
</div>
</body>
</html>